<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECU 资产管理</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 0 auto; }
        .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;margin-top: 8px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .btn { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .btn:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .top-right-btn { position: absolute; top: 20px; right: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-container">
            <button type="button" class="btn layui-btn layui-btn-normal" onclick="addEcuFeature()">
                <i class="layui-icon layui-icon-add-1"></i> 添加零部件资产</button>
        </div>
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="ecuFeatureTable" lay-filter="ecuFeatureTable"></table>
        </div>
    </div>

    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
        </div>
    </script>

    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var windowHeight = window.innerHeight;
            var tableHeight = windowHeight - 50; // 减去其他元素的高度和一些边距
            // 渲染表格
            table.render({
                elem: '#ecuFeatureTable',
                url: '/getEcuFeatures',
                height: tableHeight,
                even: true,
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true, align: 'center', hide: true},
                    {type: 'numbers', title: '序号', width: 60, align: 'center'}, // 添加'序号'列
                    {field: 'feature', title: '资产',  align: 'center'},
                    {field: 'type', title: '类型',  align: 'center'},
                    {field: 'remark', title: '备注',  align: 'center'},
                    {fixed: 'right', title: '操作', width: 130, minWidth: 125, align: 'center', toolbar: '#barDemo'}
                ]],
                done: function () {
                    console.log('表格渲染完成');
                }
            });

            // 表格工具栏事件
            table.on('tool(ecuFeatureTable)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        editEcuFeature(data);
                        break;
                    case 'delete':
                        deleteEcuFeature(data.id);
                        break;
                }
            });

            // 添加ECU特性
            window.addEcuFeature = function () {
                layer.open({
                    title: '添加ECU资产',
                    type: 2,
                    content: '/addEcuFeatureForm',
                    area: ['400px', '400px'],
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitForm = iframeWindow.document.getElementById('ecuFeatureForm');
                        var formData = new FormData(submitForm);
                        fetch('/addEcuFeature', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            layer.msg(data.msg);
                            table.reload('ecuFeatureTable');
                            layer.close(index);
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };

            // 编辑ECU特性
            window.editEcuFeature = function (ecuFeature) {
                layer.open({
                    title: '编辑ECU资产',
                    type: 2,
                    content: '/editEcuFeatureForm?id=' + ecuFeature.id,
                    area: ['400px', '400px'],
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitForm = iframeWindow.document.getElementById('ecuFeatureForm');
                        var formData = new FormData(submitForm);
                        formData.append('id', ecuFeature.id);
                        fetch('/editEcuFeature', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            layer.msg(data.msg);
                            table.reload('ecuFeatureTable');
                            layer.close(index);
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };

            // 删除ECU特性
            window.deleteEcuFeature = function (id) {
                layer.confirm('确定要删除该ECU资产吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    fetch(`/deleteEcuFeature/${id}`, {
                        method: 'DELETE'
                    })
                    .then(response => response.json())
                    .then(data => {
                        layer.msg(data.msg);
                        table.reload('ecuFeatureTable');
                    });
                }, function () {
                    layer.msg('已取消删除');
                });
            };
        });
    </script>
</body>
</html>